<template lang="jade">
.list-block
  ul
    li(v-for="(index, el) in list")
      a(@click="click(index)", :class="{ontap: ontap}")
        .item-content
          .item-media
            i.fa.fa-shopping-cart
          .item-inner
            .item-inner
              .item-title {{el.title}}
              .item-after {{el.after}}
          i.fa.fa-angle-right
    //- li(v-if="show", transition="staggered", stagger="100")
    //-   .item-content
    //-     .item-media
    //-       i.fa.fa-shopping-cart
    //-     .item-inner
    //-       .item-inner
    //-         .item-title 购物车
    //-         .item-after cbadfadfad
    //-     i.fa.fa-angle-right
    //- li(v-if="show", transition="staggered", stagger="100")
    //-   .item-content
    //-     .item-media
    //-       i.fa.fa-shopping-cart
    //-     .item-inner
    //-       .item-inner
    //-         .item-title 购物车
    //-         .item-after cbadfadfad
    //-     i.fa.fa-angle-right
    //- li(v-if="show", transition="staggered", stagger="100")
    //-   .item-content
    //-     .item-media
    //-       i.fa.fa-shopping-cart
    //-     .item-inner
    //-       .item-inner
    //-         .item-title 购物车
    //-         .item-after cbadfadfad
    //-     i.fa.fa-angle-right
    //- li(v-if="show", transition="staggered", stagger="100")
    //-   .item-content
    //-     .item-media
    //-       i.fa.fa-shopping-cart
    //-     .item-inner
    //-       .item-inner
    //-         .item-title 购物车
    //-         .item-after cbadfadfad
    //-     i.fa.fa-angle-right
</template>

<style lang="less">
  @import "../less/libs/color-vars.less";
  @import "../less/libs/mixins.less";

  .list-block {
    ul {

    }
    ul li {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: darken(#fff, 10%);
        height: 1px;
        width: 100%;
      }
      > a {
        padding: 1rem;
        display: block;
      }
      > div.item-content {
        padding: 1rem;
        > i {
          display: none;
        }
      }
      a > .item-content {
        > i {
          position: absolute;
          right: 1rem;
          color: darken(#fff, 30%);
          font-size: 1.5rem;
        }
      }
      .item-content {
        > div {
          display: inline-block;
        }
        .item-media {
          width: 10%;
        }
        .item-inner {
          width: 90%;
          position: relative;
          .item-after {
            position: absolute;
            right: 0;
            bottom: 0;
            color: darken(#fff, 30%);
          }
        }
      }
    }
  }

  .staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 54px;
  }
  .staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
  }

</style>

<script>
  import $ from 'jquery'

  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            title: 'abc',
            after: 'cba'
          }]
        }
      }
    },
    data() {
      return {
        show: false
      }
    },
    methods: {
      click(index) {
        this.$dispatch('list-click', index)
      }
    }
  }
</script>
